<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>计算属性和监视</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model="firstName" /> <br />
            名：<input type="text" v-model="lastName" />
            <!-- 复杂的插值语法 -->
            <p>{{firstName + '-' + lastName}}</p>
            <!-- 方法 -->
            <p>{{getFullName()}}</p>
            <p>{{getFullName()}}</p>
            <!-- 计算属性 -->
            <p>{{fullName}}</p>
            <p>{{fullName}}</p>
        </div>
        <script>
            let vm = new Vue({
                el: '#root',
                data: {
                    firstName: 'china',
                    lastName: 'vane',
                },
                methods: {
                    //通过一个方法我们可以实现名称的显式
                    getFullName() {
                        console.log('getFullName被调用');
                        return this.firstName + '-' + this.lastName;
                    },
                },
                //计算属性：当我们需要这个数据但是又没有，这个数据和原有的数据还有关系
                computed: {
                    // 默认编写计算函数实现的是get操作，如果需要进行set则需要写全
                    // TODO:属性计算的get/set
                    fullName: {
                        get() {
                            console.log('计算属性get被调用');
                        },
                        set(val) {
                            console.log('计算属性set被调用');
                        },
                    },
                },
            });
        </script>
    </body>
</html>
